<script lang="ts" setup>
import { NButton, NIcon, NInput, useDialog, useMessage } from 'naive-ui'
import { Reload, Search, TrashOutline } from '@vicons/ionicons5'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { addSearchItem, loadSearchItems, saveSearchItems } from './history'
import { GethotHistory, getCategoryListByKeys } from '@/api/home';
import ChangjingItem from "./child/ChangjingItem.vue"
// 页面加载时从本地存储加载搜索项
onMounted(() => {
  loadSearchItems(searchItems.value)
  getHotList(false)
})
const dialog = useDialog()
const router = useRouter()

function back() {
  router.back()
}
// setTimeout(() => {
  
// }, timeout);
const message = useMessage()
const HotHistoryList = ref([])
function getHotList(i) {
  GethotHistory(null).then((res) => {
    HotHistoryList.value = res.data
    if (i) {
      message.success('刷新成功')
    }
  })
}

const value = ref()
const searchItems = ref<string[]>([])
const contentList = ref([])
const noResult = ref(false)
function SearchValue() {
  if (value.value) {
    addSearchItem(value.value, searchItems.value)
    // 保存搜索项到本地存储
    saveSearchItems(searchItems.value)
    const data = {
      keys: value.value,
    }
    getCategoryListByKeys(data).then((res) => {
      contentList.value = res.data
      noResult.value = contentList.value.length == 0
    })
  }
  else {
    contentList.value = []
  }
}

// 数据清空回调
const clear = (val) => {
  if (!val && contentList.value.length == 0)
    noResult.value = false
}
// 动态加载图片
const getImageUrl = (name) => {
  return new URL(`../../assets/imgs/homeIcon/${name}`, import.meta.url).href
}
// 清空历史记录
function delHistorylist() {
  dialog.warning({
    title: '删除',
    content: '确定要删除搜索历史记录？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      localStorage.removeItem('LOCAL_STORAGE_KEY')
      searchItems.value = []
      message.success('删除成功')
    },
    onNegativeClick: () => {
      // message.error('取消')
    },
  })
}

// 详情页面跳转
const toDetail = (item) => {
  router.push({ path: '/homedetails', query: { items: JSON.stringify(item) } })
}

// 二次查询
function searchHistory(i) {
  value.value = i
  SearchValue()
}
</script>

<template>
  <!-- header -->
  <W-HeaderNav>内容搜索</W-HeaderNav>
  <div class="homedetails pr  wrap">

    <div class="input">
      <NInput class="nob0" v-model:value="value" placeholder="搜索" round style="width: 80%;" clearable @input="clear">
        <template #prefix>
          <NIcon :component="Search" color="#fff" />
        </template>
      </NInput>
      <!-- <NButton round style="background-color: #83CD88;color: #fff;">
        <span style="position: relative;top: -1px;" @click="SearchValue">搜索</span>
      </NButton> -->
      <W-Button round :bordered="false" style="background-color: #83CD88;color: #fff;" @click="SearchValue">
        搜索
      </W-Button>
    </div>
    <div v-if="contentList.length == 0 && !noResult" style="display: flex;flex-direction: column;margin-left: 2px;">
      <div v-if="searchItems.length > 0" style="margin-bottom: .42rem;">
        <div class="dis">
          <div style="font-size:.3867rem;font-weight: 550;font-family: Source Han Sans CN-Medium;">
            搜索历史
          </div>
          <NIcon size="18" :component="TrashOutline" color="#ADAEB0" @click="delHistorylist" />
        </div>
        <div v-if="searchItems.length > 0">
          <div v-for="i in searchItems" class="title">
            <div style="font-size:.3467rem;padding: 0.06rem .25rem;font-family: Source Han Sans CN-Regular;"
              @click="searchHistory(i)">
              {{ i }}
            </div>
          </div>
        </div>
        <div v-else
          style="display: flex;justify-content: center;font-size:.3467rem;font-family: Source Han Sans CN-Regular;padding: 10px;">
          暂无历史记录
        </div>
      </div>
      <!-- style="margin-top: 10px;" -->
      <div>
        <div class="dis">
          <div style="font-size:.3867rem;font-weight: 550;font-family: Source Han Sans CN-Medium;">
            热门搜索
          </div>
          <NIcon size="18" :component="Reload" color="#ADAEB0" @click="getHotList(true)" />
        </div>
        <div v-for="i in HotHistoryList" class="title" @click="searchHistory(i.title)">
          <div style="font-size:.3467rem;padding: 0.06rem .25rem;font-family: Source Han Sans CN-Regular;">
            {{ i.title }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="contentList.length > 0" class="" style="margin: 0 auto;display: flex;padding:0 4px;flex-wrap: wrap;justify-content: flex-start;gap: 0.45rem;">
       <ChangjingItem v-for="item in contentList" :item="item" />
    </div>
    <div v-if="contentList.length == 0 && noResult" style="display: flex;justify-content: center;margin-top: 2.6667rem;">
      <img style="width: 200px;" src="../../assets/imgs/result.webp" alt="">
    </div>
  </div>
</template>

<style scoped lang="less">
@import url(../../styles/common.less);
@import url(../../styles/home.less);

.homedetails {
  padding: 0 .2125rem;
}

.input {
  /* padding: 2px 20px;
    width: 70%; */
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: .2667rem;
  margin-bottom: .5rem;
}

.dis {
  display: flex;
  width: 94vw;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  // margin-top: 20px;
}

.title {
  border-radius: 10px;
  background-color: var(--a-input-background-color);
  float: left;
  border-radius: 30px;
  margin-left: .2rem;
  margin-top: .24rem;
}

.tabBox {
  // width: 50%;
  // width: 49%;
  height: 2.6133rem;
  border-radius: .3733rem;
  margin-bottom: .3467rem;
}

.changjing-list {
  display: flex;
  // justify-content: space-between;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* 只要您把这个属性去掉,就不会自动换行了*/
  background: var(--a-main-bg-color);
}

.changjing {
  // width: 48%;
  // margin-bottom: 20px;
}
</style>
